<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<section id="provider-init-section">
	<div class="row-fluid">
		<div class="span6">
			<div class="page-header">
				<h3>Create Provider</h3>
			</div>
		</div>
		<div class="span18">
			<form:form action="provider/create" method="post" id="createform"
				class="form-horizontal" modelAttribute="provider">
				<fieldset>
					<div class="control-group">
						<label class="control-label" for="providerType">Provider
							Type</label>
						<div class="controls">
							<form:radiobutton path="providerType" value="LOCAL" />
							Local
							<form:radiobutton path="providerType" value="CLOUD" />
							Cloud
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="name">Provider
							Name</label>
						<div class="controls">
							<form:input path="name" class="input-xlarge" />
							<form:errors path="name" />
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="bucketName">Bucket Name</label>
						<div class="controls">
							<form:input path="bucketName" class="input-xlarge disabled" />
							<form:errors path="bucketName" />
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="accessKey">Access Key</label>
						<div class="controls">
							<form:input path="accessKey" class="input-xlarge" />
							<form:errors path="accessKey" />
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="secretKey">Secret Key</label>
						<div class="controls">
							<form:input path="secretKey" class="input-xlarge" />
							<form:errors path="secretKey" />
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="className">Class Name</label>
						<div class="controls">
							<form:input path="className" class="input-xlarge" />
							<form:errors path="className" />
						</div>
					</div>
					<div class="form-actions">
						<button type="submit" class="ks-button ks-button-primary">Create</button>
					</div>
				</fieldset>
			</form:form>
		</div>
	</div>
</section>

<script>
	KISSY.ready(function(S) {
		S.use("validation", function(S, Validation) {
			var check = new Validation('#createform', {
				style : "text",
				event : 'blur'
			});

			check.add("#providerType", {
				required : true
			});

			check.add("#name", {
				required : true,
				length : [ 4, 12, true ]
			});

			KISSY.Event.on('#createform', "submit", function() {
				return check.isValid();
			});

		});
	});
</script>